import React from 'react';
import * as echarts from 'echarts';

class EChartMRP extends React.Component {
  myChart = {}
  componentDidMount() {
    this.myChart = echarts.init(document.getElementById('EChartMRP'));
    let _this = this;
    setInterval(function () {
      _this.myChart.resize();
    }, 2000)
  }
  componentDidUpdate() {
    const { data } = this.props;
    var dataArr = []
    var dataInsp = 0;
    data.dataInsp?.items.forEach(element => {
      dataInsp += element.inspQty
    });
    var dataSTK = 0;
    data.dataSTK?.items.forEach(element => {
      dataSTK += element.onhandQty
    });
    var dataPo = 0;
    data.dataPo?.items.forEach(element => {
      dataPo += element.orderQty
    });
    var dataDMR = 0;
    data.dataDMR?.items?.forEach(element => {
      dataDMR += element.conQty
    });
    var dataSug = 0;
    data.dataSug?.items?.forEach(element => {
      dataSug += element.xRelQty
    });
    var suggQty = data.reqQty - dataSTK - dataPo - dataInsp - dataDMR;
    suggQty = suggQty < 0 ? 0 : suggQty;
    dataArr.push({ value: data.reqQty, name: '需求' })
    dataArr.push({ value: dataSTK.toFixed(2), name: '库存' })
    dataArr.push({ value: dataPo.toFixed(2), name: '采购' })
    dataArr.push({ value: dataInsp.toFixed(2), name: '检验' })
    dataArr.push({ value: dataDMR.toFixed(2), name: 'DMR' })
    dataArr.push({ value: suggQty.toFixed(2), name: '建议' })
    // 绘制图表
    this.myChart.setOption({
      title: {
        text: '供需分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          //name: '供需分布',
          type: 'pie',
          radius: '50%',
          data: dataArr,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });
  }
  render() {
    return (
      <div id='EChartMRP' style={{ height: this.props.height }}></div>
    )
  };
}
export default EChartMRP;